<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听/监视属性的变化 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数字: <input type="text" v-model="number"><br>
        数字: <input type="text" v-model="a.b"><br>
        数字: <input type="text" v-model="a.c"><br>
        数字: <input type="text" v-model="a.d.e.f"><br>
        数字(后期添加监视): <input type="text" v-model="number2"><br>
    </div>

    <script>
        const vm = new Vue ({
            el : '#app',
            data : {
                msg:'侦听属性的变化',
                number : 0,
                number2 : 1,
                // a 属性中保存的值时一个对象的内存地址。
                // a = 0x2356
                a:{
                    b:0,
                    c:0,
                    d :{
                        e:{
                            f:0
                        }
                    }
                }
            },
            computed:{
                hehe(){
                    return 'haha' + this.number
                }
            },
            watch : {
                // 可以监视多个属性
                // 监视哪个属性，请把这个属性的名字拿过来即可
                // 可以监视Vue的原有属性
                number : {

                    // 初始化的时候，调用一次handler方法
                    immediate : true,

                    // 这里有一个固定写思的方法，方法名必须叫做:handler
                    // handler方法什么时候被调用呢？当被监视的属性发生变化的时候，handler就会自动调用一次。
                    // handler 方法上有两个参数，第一个参数newValue,第二个参数是oldValue
                    // newVaule 是属性值改变之后的新值
                    // oldVaule 是属性值改变之前的旧值
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue)
                        // this是当前Vue实例
                        console.log(this)
                        // 如果该函数时箭头函数，这个this时window对象，不建议使用箭头函数。
                    }
                },

                // 也可以监视计算属性
            /*     hehe:{
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue)
                    }
                } */

                // 如果监视的属性具有多级结构，一定要添加单引号：'a.b'
                /* 'a.b':{
                    handler(newValue,oldValue) {
                        console.log('@')
                    }
                } */

                a:{
                    // 启用深度监视
                    // 什么时候启动深度监视：当你需要监视一个具有多级结构的属性，并且监视所有的属性，需要启动深度监视
                    deep:true,
                    inmmediate:true,
                    handler(newValue,oldValue) {
                        console.log('@')
                    }
                },


                // 注意：监视某个属性的时候，也有简写形式:什么时候启用简写形式？
                // 当只有handler回调函数的时候，可以使用简写形式。
                number(newValue,oldValue){
                    console.log(newValue,oldValue)
                }
            }

    
        })


        // 注意这个后期挂载监视属性只能写一个$watch,不能多个使用
        // 如何后期添加监视？调用Vue相关的API即可
            // 语法:vm.$watch('被监视的属性名',{})
            vm.$watch('number2',{
                immediate : true,
                deep : true,
                handler(newValue,oldValue){
                    console.log(newValue,oldValue)
                }
            })

    </script>
    
</body>
</html>